<template>
	<view class="view-tab">
		<template v-if="isEnable">
			<view class="button" @click="handleViewContract">
				<image class="icon" src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/user-contract.png"></image>
				<image class="font" src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/user-contract-txt.png"></image>
			</view>
			<view class="button" @click="handleViewProduct">
				<image class="font" src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/xiangmubaojia-txt1734601380998.png"></image>
				<image class="icon" src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/user-product.png"></image>
			</view>
		</template>
		<template v-else>
			<view class="one-btn" @click="handleViewContract">
				<image class="img-bg" src="@/static/image/hetong-bg.png"></image>
				<image class="icon" src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/user-contract.png"></image>
				<image class="font" src="@/static/image/hetong.png"></image>
			</view>
		</template>
	</view>
</template>

<script setup>
import useUserStore from '@/store/modules/user/index.js';
const { isLogin } = useUserStore();
const props = defineProps({
	isEnable: {
		type: Boolean,
		default: true
	}
});
const handleViewContract = () => {
	if (!isLogin.value) {
		isLogin.popShow = true;
	} else {
		// 跳转合同页面
		uni.navigateTo({ url: '/pages/contractManage/contractList/index' });
	}
};
const handleViewProduct = () => {
	if (!isLogin.value) {
		isLogin.popShow = true;
	} else {
		// 跳转项目报价页面
		uni.navigateTo({ url: '/pages/budgetQuota/list/index' });
	}
};
</script>

<style lang="scss" scoped>
.view-tab {
	width: 100%;
	height: 128rpx;
	line-height: 128rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden; /* 确保超出部分不会显示 */
	border-radius: 15rpx;

	.button {
		position: relative;
		width: 56%; /* 每个按钮占据一半宽度 */
		height: 100%;
		display: flex;
		//   justify-content: center;
		justify-content: space-between;
		align-items: center;
		background-size: cover;
		background-position: center;
		z-index: 1; /* 确保内容在背景图之上 */
		transition: background-position 0.3s ease; /* 平滑过渡效果 */
		box-sizing: border-box;
	}
	.button:first-child {
		background-image: url('http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/user-tab-left.png');
		background-position: right; /* 使第一个按钮的背景图靠右对齐 */
		margin-right: -45px; /* 重叠部分的宽度 */
		padding-right: 65px;
		clip-path: polygon(0% 0%, 106% 0%, 70% 100%, 0% 100%);
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(134, 144, 156, 0.1);
	}

	.button:last-child {
		background-image: url('http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/user-tab-right.png');
		background-position: left; /* 使第二个按钮的背景图靠左对齐 */
		margin-left: 0px; /* 重叠部分的宽度 */
		padding-left: 65px;
		clip-path: polygon(29% 0%, 100% 0%, 100% 100%, -3% 100%);
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(134, 144, 156, 0.1);
	}


	.icon {
		width: 128rpx;
		height: 128rpx;
	}

	.font {
		width: 144rpx;
		height: 40rpx;
	}
	
	
	.one-btn {
		position: relative;
		width: 100%; /* 每个按钮占据一半宽度 */
		height: 100%;
		display: flex;
		//   justify-content: center;
		flex-direction: row;
		align-items: center;
		background-size: cover;
		background-position: center;
		z-index: 1; /* 确保内容在背景图之上 */
		transition: background-position 0.3s ease; /* 平滑过渡效果 */
		box-sizing: border-box;
		background: linear-gradient(to right, #fff, #c0e8ff);
		.img-bg {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
		}
	}
}
</style>
